import { PureComponent } from 'react';
import moment from 'moment';
import '@/assets/iconfont/iconfont';
import styles from './StaffInfoList.less';
import SelectDeptTree from '@/components/SelectDeptTree';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
    DatePicker,
    Button,
    Upload,
    Cascader
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};

@Form.create()
class UpdateForm extends PureComponent {
	
	constructor(props) {
		super(props);
		const staffAge = moment().format('YYYY') - moment(props.values.date_of_birth).format('YYYY');
		this.state = {
			formVals: {
				id: props.values.id,
				pname: props.values.pname,
				en_pname: props.values.en_pname,
				phone: props.values.phone,
				gender: props.values.gender,
				country: props.values.country,
				idcard: props.values.idcard,
				passport_number: props.values.passport_number,
				date_of_birth: props.values.date_of_birth,
				birthday: props.values.birthday,
				age: props.values.age,
				place_of_origin: props.values.place_of_origin,
				zdiac: props.values.zdiac,
				constellation: props.values.constellation,
				nation: props.values.nation,
				marital_status: props.values.marital_status,
				blood_type: props.values.blood_type,
				place_of_domicile: props.values.place_of_domicile,
				political_outlook: props.values.political_outlook,
				join_party_time: props.values.join_party_time,
				archiving_agency: props.values.archiving_agency,
				chrildren_status: props.values.chrildren_status,
				chrildren_commercial_insurance: props.values.chrildren_commercial_insurance,
				illegal_activities: props.values.illegal_activities,
				major_medical_history: props.values.major_medical_history,
				first_education: props.values.first_education,
				dept_id: props.values.dept_id,
				dept: props.values.dept,
				post_id: props.values.post_id,
				post_name: props.values.post_name,
			},
			file: null,
			imageUrl: props.values.photo_sign,
			ageNum: staffAge?staffAge:null,
			photoNum: props.values.photo_sign?1:0,
			visiblePhoto: false,
			getDeptTreeBySelectTree: "",
		};

	}
	
	
	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
			const staffAge = moment().format('YYYY') - moment(nextProps.values.date_of_birth).format('YYYY');
		    this.setState({
		      formVals: nextProps.values,
		      imageUrl: nextProps.values.photo_sign,
		      photoNum: nextProps.values.photo_sign?1:0,
		      ageNum: staffAge?staffAge:null
		    });
		}
		
	}
	
	selectedDeptTreeValue = (deptRecord) => {
		this.setState({
			getDeptTreeBySelectTree: deptRecord
		})
	}
	
	beforeUpload = file => {
		
		this.setState({
        	file:file,
	  	});

		if(window.FileReader) {
	      const reader = new FileReader();
	      
	      reader.readAsDataURL(file);
	      
			  reader.addEventListener('load', () => {
			  	
			  	this.setState({
		          imageUrl:reader.result,
		          loading: false,
		          photoNum: 1
		      	})

			  });
		}

	  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
	  if (!isJpgOrPng) {
	    message.error('You can only upload JPG/PNG file!');
	  }
	  const isLt2M = file.size / 1024 / 1024 < 2;
	  if (!isLt2M) {
	    message.error('Image must smaller than 2MB!');
	  }
	  return isJpgOrPng && isLt2M;
	}
	
	handleCancel = () => {
		this.setState({
	      visiblePhoto: false,
	    });
	}
	
	handleOk = () => {
		this.setState({
	      visiblePhoto: false,
	    });
	}
	
	staffPhotoShow = () => {
		this.setState({
	      visiblePhoto: true,
	    });
	}
 	
 	birthChange = value => {
		this.setState({
			ageNum: moment().format('YYYY') - value.format('YYYY')
			
		})
	}
	
	handleLocalUpdate = (event) => {
		event.preventDefault();
		const { form,handleSubmitBaseInfo } = this.props;		
		const { formVals: oldValue,getDeptTreeBySelectTree } = this.state;
		form.validateFields((err, fieldsValue) => {
			if(err) return;
			form.resetFields();
			const formVals = { 
				...oldValue,
				...fieldsValue
			};
			this.setState({
				formVals,
			});
			
			if(getDeptTreeBySelectTree) {
				formVals.dept_id = getDeptTreeBySelectTree.triggerNode.props.dataRef.dept_id;
				formVals.dept = getDeptTreeBySelectTree.triggerNode.props.dataRef.title;
			}
			
			if(formVals.post) {
				formVals.post_id = formVals.post.key;
				formVals.post_name = formVals.post.label;
			}
			
			if(formVals.date_of_birth) {
      			formVals.date_of_birth = moment(formVals.date_of_birth._d).format("YYYY-MM-DD");
      		}
			if(formVals.join_party_time) {
      			formVals.join_party_time = moment(formVals.join_party_time._d).format("YYYY-MM-DD");
      		}
			formVals.file = this.state.file;
			handleSubmitBaseInfo(formVals);

		});
	};
	
  render() {
    const {
    	form: {getFieldDecorator}, 
    	editBaseInfo,
    	cancelEditBaseInfo,
    	cascaderList,
    	values,
    	selectDeptTree,
    	postForUser,
		requestModelName,
		dispatch
    } = this.props;
    
    const parentDeptTreeMethod = {
		dispatch: dispatch,
		selectDeptTree: selectDeptTree,
		selectedDeptTreeValue: this.selectedDeptTreeValue,
		requestModelName: requestModelName,
	}
    
    const { formVals,imageUrl,photoNum } = this.state;
    let newPlace = [];
    if(values.place_of_origin && values.place_of_origin != "null" ) {
    	const place = JSON.parse(values.place_of_origin);
    	newPlace = place.map((item,index) => item = item + '');
    }
   	const uploadButton = (
      <div style={{marginTop: '30px'}}>
      	<svg className={`${styles.icon} ${styles.staffPhoto}`} aria-hidden="true">
          <use xlinkHref="#icon-shangchuanzhaopian"></use>
        </svg>
        <div className="ant-upload-text">上传照片</div>
      </div>
    );
	return (
		<div>
			<Modal
	    	  centered
	    	  title="员工照片"
	    	  width={800}
			  bodyStyle={{textAlign: 'center'}}
	          visible={this.state.visiblePhoto}
	          onOk={this.handleOk}
	          onCancel={this.handleCancel}
	        >
				<Upload 
			      	accept=".jpeg,.png,.jpg"
			        listType="picture-card"
			        className="avatar-uploader"
			        showUploadList={false}
			        beforeUpload={this.beforeUpload}
			        style={{display: 'table',width:'120px',height: '120px',margin: '0 auto',verticalAlign:'top'}}
			      >
		        	{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
		      	</Upload>
		      	<div>图片格式为JPG/JPEG/PNG,大小在2MB内</div>
	        </Modal>
			{editBaseInfo?(
				<Form  onSubmit={this.handleLocalUpdate}>
			
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="姓名">
			              {getFieldDecorator('pname', {
			              rules: [{ required: true, message: '请输入1-10个字符的姓名',max: 10}],
			              initialValue: formVals.pname,
			              })(<Input placeholder="1-10个字符"/>)}
			          </FormItem>
			        </Col>
					
					<Col md={12} sm={24}>
			          <FormItem  label="英文名">
			              {getFieldDecorator('en_pname', {
			              rules: [{ required: true, message: '请输入1-10个字符的姓名',max: 10}],
			              initialValue: formVals.en_pname,
			              })(<Input placeholder="1-10个字符"/>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="性别">
			              {getFieldDecorator('gender',{
			              	initialValue: formVals.gender,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="01">男</Select.Option>
			                    <Select.Option key="02">女</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="身份证号">
			              {getFieldDecorator('idcard', {
			              rules: [{ required: false, message: '身份证格式不符',  pattern:/^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/ }],
			              initialValue: formVals.idcard,
			              })(<Input placeholder="正规身份证号格式" />)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
					<Col md={12} sm={24}>
			          <FormItem  label="国家/地区">
			              {getFieldDecorator('country', {
			              rules: [{ required: false, message: '请选择非正式类型'}],
			              initialValue: formVals.country,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">中国大陆</Select.Option>
			                    <Select.Option key="2">港澳台</Select.Option>
			                    <Select.Option key="3">国外</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>

			        <Col md={12} sm={24}>
			          <FormItem  label="员工照片">
			              {getFieldDecorator('photo',{
			                rules: [{ required: false, message: '请选择员工照片！'}],
			              })(
			              	<div className={styles.staffPhotoContainer} onClick={this.staffPhotoShow}>
			      		      	<svg className={`${styles.icon} ${styles.staffPhoto}` } aria-hidden="true">
						          <use xlinkHref="#icon-tupian"></use>
						        </svg>
						        <span className={styles.staffPhotoNum}>{photoNum}张图片</span>
			              	</div>
			              )}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    

			        <Col md={12} sm={24}>
			          <FormItem  label="护照号">
			              {getFieldDecorator('passport_number', {
			              rules: [{ required: false, message: '护照格式不符',  pattern:/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/ }],
			              initialValue: formVals.passport_number,
			              })(<Input placeholder="正规护照号格式" />)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="出生日期">
			              {getFieldDecorator('date_of_birth', {
			              initialValue: formVals.date_of_birth?moment(formVals.date_of_birth):null,
			              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择" onChange={this.birthChange}/>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    

			        <Col md={12} sm={24}>
			          <FormItem  label="生日">
			              {getFieldDecorator('birthday', {
			              rules: [{ required: false, message: '最多输入4个字符', max: 4}],
			              initialValue: formVals.birthday,
			              })(<Input placeholder="示例: 0509" />)}
			          </FormItem>
			        </Col>
			        
			       	<Col md={12} sm={24}>
			          <FormItem  label="年龄">
			              {getFieldDecorator('age',{
			              	initialValue: this.state.ageNum,
			              })(<Input disabled/>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			    	<Col  md={12} sm={24}>
				        <FormItem  label="籍贯">
				            {getFieldDecorator('place_of_origin', {
				            rules: [{ required: false }],
				            initialValue: newPlace,
				            })(<Cascader options={cascaderList != undefined?cascaderList.list:null} onChange={this.onChange} placeholder="请选择" changeOnSelect />)}
				        </FormItem>
			        </Col>
					<Col md={12} sm={24}>
			          <FormItem  label="属相">
			              {getFieldDecorator('zdiac',{
			              	initialValue: formVals.zdiac,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">鼠</Select.Option>
			                    <Select.Option key="2">牛</Select.Option>
			                    <Select.Option key="3">虎</Select.Option>
			                    <Select.Option key="4">兔</Select.Option>
			                    <Select.Option key="5">龙</Select.Option>
			                    <Select.Option key="6">蛇</Select.Option>
			                    <Select.Option key="7">马</Select.Option>
			                    <Select.Option key="8">羊</Select.Option>
			                    <Select.Option key="9">猴</Select.Option>
			                    <Select.Option key="10">鸡</Select.Option>
			                    <Select.Option key="11">狗</Select.Option>
			                    <Select.Option key="12">猪</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

			        <Col md={12} sm={24}>
			          <FormItem  label="星座">
			              {getFieldDecorator('constellation',{
			              	initialValue: formVals.constellation,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">水平座</Select.Option>
			                    <Select.Option key="2">双鱼座</Select.Option>
			                    <Select.Option key="3">白羊座</Select.Option>
			                    <Select.Option key="4">金牛座</Select.Option>
			                    <Select.Option key="5">双子座</Select.Option>
			                    <Select.Option key="6">巨蟹座</Select.Option>
			                    <Select.Option key="7">狮子座</Select.Option>
			                    <Select.Option key="8">处女座</Select.Option>
			                    <Select.Option key="9">天秤座</Select.Option>
			                    <Select.Option key="10">天蝎座</Select.Option>
			                    <Select.Option key="11">射手座</Select.Option>
			                    <Select.Option key="12">摩羯座</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="民族">
			              {getFieldDecorator('nation',{
			              	rules: [{ required: false, message: '最多输入10个字符', max: 10}],
			              	initialValue: formVals.nation,
			              })(<Input placeholder="1-10个字符" />)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			
			        <Col md={12} sm={24}>
			          <FormItem  label="婚姻状况">
			              {getFieldDecorator('marital_status',{
			              	initialValue: formVals.marital_status,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">未婚</Select.Option>
			                    <Select.Option key="2">已婚</Select.Option>
			                    <Select.Option key="4">离异</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
					<Col md={12} sm={24}>
			          <FormItem  label="血型">
			              {getFieldDecorator('blood_type',{
			              	initialValue: formVals.blood_type,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">A型</Select.Option>
			                    <Select.Option key="2">B型</Select.Option>
			                    <Select.Option key="3">O型</Select.Option>
			                    <Select.Option key="4">AB型</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			        
			    </Row>
				
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="户籍所在地">
			              {getFieldDecorator('place_of_domicile',{
			              	rules: [{ required: false, message: '最多输入40个字符', max: 40}],
			              	initialValue: formVals.place_of_domicile,
			              })(<Input placeholder="1-40个字符"/>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="政治面貌">
			              {getFieldDecorator('political_outlook',{
			              	rules: [{ required: false, message: '最多输入5个字符', max: 5}],
			              	initialValue: formVals.political_outlook,
			              })(<Input placeholder="1-5个字符"/>)}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			       	<Col md={12} sm={24}>
			          <FormItem  label="入党时间">
			              {getFieldDecorator('join_party_time', {
			              rules: [{ required: false, message: '请选择入党时间'}],
			              initialValue: formVals.join_party_time?moment(formVals.join_party_time):null,
			              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="存档机构">
			              {getFieldDecorator('archiving_agency',{
			              	rules: [{ required: false, message: '最多输入50个字符', max: 50}],
			              	initialValue: formVals.archiving_agency,
			              })(<Input placeholder="1-50个字符"/>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
   
					<Col  md={12} sm={24}>
			            <FormItem  label="部门">
			            	{getFieldDecorator('dept_name')(
			                    <SelectDeptTree {...parentDeptTreeMethod} deptValues={formVals.dept}/>
			                )}
			            </FormItem>
			        </Col>
			        
					<Col md={12} sm={24}>
				        <FormItem label="岗位">
				            {getFieldDecorator('post',{
				            	initialValue: {key: formVals.post_id,label: formVals.post_name},
				            })(
				                <Select labelInValue placeholder="请选择" style={{ width: '100%' }}>
				                	{postForUser != undefined?postForUser.list.map((item,index) => {
				                		return <Option value={item.id}>{item.post_name}</Option>
				                	}):null}
				                </Select>
				            )}
				        </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="子女状态">
			              {getFieldDecorator('chrildren_status',{
			              	initialValue: formVals.chrildren_status,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">有</Select.Option>
			                    <Select.Option key="0">无</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="子女有无商业保险">
			              {getFieldDecorator('chrildren_commercial_insurance',{
			              	initialValue: formVals.chrildren_commercial_insurance,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">有</Select.Option>
			                    <Select.Option key="0">无</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
			        <Col md={12} sm={24}>
			          <FormItem  label="有无违法违纪行为">
			              {getFieldDecorator('illegal_activities',{
			              	initialValue: formVals.illegal_activities,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">有</Select.Option>
			                    <Select.Option key="0">无</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="有无重大病史">
			              {getFieldDecorator('major_medical_history',{
			              	initialValue: formVals.major_medical_history,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="1">有</Select.Option>
			                    <Select.Option key="0">无</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
			        <Col md={12} sm={24}>
			          <FormItem  label="最高学历">
			              {getFieldDecorator('first_education',{
			              	initialValue: formVals.first_education,
			              })(
			              	<Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Select.Option key="81">小学</Select.Option>
			                    <Select.Option key="71">初中</Select.Option>
			                    <Select.Option key="61">高中</Select.Option>
			                    <Select.Option key="41">中专</Select.Option>
			                    <Select.Option key="21">本科</Select.Option>
			                    <Select.Option key="12">硕士</Select.Option>
			                    <Select.Option key="11">博士</Select.Option>
			                </Select>
			              )}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    	<Col md={12} sm={24}>
			            <Button 
			            	size="large" 
			            	style={{marginRight: '10px'}}
			            	onClick={()=> {
			            		const { form } = this.props;
  								form.resetFields();
			            		cancelEditBaseInfo();
			            	}}>
			            	取消
			           	</Button>
			            <Button size="large" type="primary" htmlType="submit">保存</Button>
			        </Col>
			    </Row>
			
			  </Form>
			):(
			<Form  {...formItemLayout}>
			
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="姓名">
			              {getFieldDecorator('pname')(<span>{formVals.pname}</span>)}
			          </FormItem>
			        </Col>
					
					<Col md={12} sm={24}>
			          <FormItem  label="英文名">
			              {getFieldDecorator('en_pname')(<span>{formVals.en_pname}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="性别">
			              {getFieldDecorator('gender')(<span>
			              	{(() => {
			              		switch(formVals.gender) {
				              		case "01":
				              			return "男";
				              			break;
				              		case "02":
				              			return "女";
				              			break;
				              		default:
				              			break;
				              	}
			              	}
			             )()}
			            </span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="身份证号">
			              {getFieldDecorator('idcard')(<span>{formVals.idcard}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
					<Col md={12} sm={24}>
			          <FormItem  label="国家/地区">
			              {getFieldDecorator('country')(<span>
				            {(() => {
				              		switch(formVals.country) {
					              		case "1":
					              			return "中国大陆";
					              			break;
					              		case "2":
					              			return "港澳台";
					              			break;
					              		case "3":
					              			return "国外";
					              			break;
					              		default:
					              			break;
					              	}
				              	}
				            )()}
			              </span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="员工照片">
			              {getFieldDecorator('photo')(<span>
				              	{
			              			imageUrl?(
					              		<svg className={`${styles.icon} ${styles.staffPhoto}` } aria-hidden="true">
								          <use xlinkHref="#icon-tupian"></use>
								        </svg>):null
				              	}
			              	</span>)}
			          </FormItem>
			        </Col>
			
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="护照号">
			              {getFieldDecorator('passport_number')(<span>{formVals.passport_number}</span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="出生日期">
			              {getFieldDecorator('date_of_birth')(<span>{formVals.date_of_birth?moment(formVals.date_of_birth).format('YYYY-MM-DD'):null}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="生日">
			              {getFieldDecorator('birthday')(<span>{formVals.birthday}</span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="年龄">
			              {getFieldDecorator('age')(<span>{this.state.ageNum}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			    	<Col  md={12} sm={24}>
				        <FormItem  label="籍贯">
				            {getFieldDecorator('place_of_origin',{
				            	initialValue: newPlace,
				            })(
				            	<Cascader disabled className={styles.nativePlace} options={cascaderList != undefined?cascaderList.list:null} placeholder=""/>
				            )}
				        </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="属相">
			              {getFieldDecorator('zdiac')(<span>
			              	 {(() => {
				              		switch(formVals.zdiac) {
					              		case "1":
					              			return "鼠";
					              			break;
					              		case "2":
					              			return "牛";
					              			break;
					              		case "3":
					              			return "虎";
					              			break;
					              		case "4":
					              			return "兔";
					              			break;
					              		case "5":
					              			return "龙";
					              			break;
					              		case "6":
					              			return "蛇";
					              			break;
					              		case "7":
					              			return "马";
					              			break;
					              		case "8":
					              			return "羊";
					              			break;
					              		case "9":
					              			return "猴";
					              			break;
					              		case "10":
					              			return "鸡";
					              			break;
					              		case "11":
					              			return "狗";
					              			break;
					              		case "12":
					              			return "猪";
					              			break;
					              		default:
					              			break;
					              	}
				              	}
				            )()}
			              </span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="星座">
			              {getFieldDecorator('constellation')(<span>
			              	{(() => {
				              		switch(formVals.constellation) {
					              		case "1":
					              		return "水平座";
					              			break;
					              		case "2":
					              			return "双鱼座";
					              			break;
					              		case "3":
					              			return "白羊座";
					              			break;
					              		case "4":
					              			return "金牛座";
					              			break;
					              		case "5":
					              			return "双子座";
					              			break;
					              		case "6":
					              			return "巨蟹座";
					              			break;
					              		case "7":
					              			return "狮子座";
					              			break;
					              		case "8":
					              			return "处女座";
					              			break;
					              		case "9":
					              			return "天秤座";
					              			break;
					              		case "10":
					              			return "天蝎座";
					              			break;
					              		case "11":
					              			return "射手座";
					              			break;
					              		case "12":
					              			return "摩羯座";
					              			break;
					              		default:
					              			break;
					              	}
				              	}
				            )()}
			              </span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="民族">
			              {getFieldDecorator('nation')(<span>{formVals.nation}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			
			        <Col md={12} sm={24}>
			          <FormItem  label="婚姻状况">
			              {getFieldDecorator('marital_status')(<span>
			              	{(() => {
				              		switch(formVals.marital_status) {
					              		case "1":
					              			return "未婚";
					              			break;
					              		case "2":
					              			return "已婚";
					              			break;
					              		case "4":
					              			return "离异";
					              			break;
					              		default:
					              			break;
					              	}
				              	}
				            )()}
			              </span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="血型">
			              {getFieldDecorator('blood_type')(<span>
			              	{(() => {
				              		switch(formVals.blood_type) {
					              		case "1":
					              			return "A型";
					              			break;
					              		case "2":
					              			return "B型";
					              			break;
					              		case "3":
					              			return "O型";
					              			break;
					              		case "4":
					              			return "AB型";
					              			break;
					              		default:
					              			break;
					              	}
				              	}
				            )()}
			              </span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
				
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="户籍所在地">
			              {getFieldDecorator('place_of_domicile')(<span>{formVals.place_of_domicile}</span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="政治面貌">
			              {getFieldDecorator('political_outlook')(<span>{formVals.political_outlook}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			       	<Col md={12} sm={24}>
			          <FormItem  label="入党时间">
			              {getFieldDecorator('join_party_time')(<span>{formVals.join_party_time?moment(formVals.join_party_time).format('YYYY-MM-DD'):null}</span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="存档机构">
			              {getFieldDecorator('archiving_agency')(<span>{formVals.archiving_agency}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			       	<Col md={12} sm={24}>
			          <FormItem  label="部门">
			              {getFieldDecorator('dept')(<span>{formVals.dept}</span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="岗位">
			              {getFieldDecorator('post_name')(<span>{formVals.post_name}</span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			    
			        <Col md={12} sm={24}>
			          <FormItem  label="子女状态">
			              {getFieldDecorator('chrildren_status')(<span>
			              		{(() => {
					              		switch(formVals.chrildren_status) {
						              		case "0":
						              			return "无";
						              			break;
						              		case "1":
						              			return "有";
						              			break;
						              		default:
						              			break;
						              	}
				              		}
				            	)()}
			              </span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="子女有无商业保险">
			              {getFieldDecorator('chrildren_commercial_insurance')(<span>
			              		{(() => {
					              		switch(formVals.chrildren_commercial_insurance) {
						              		case "0":
						              			return "无";
						              			break;
						              		case "1":
						              			return "有";
						              			break;
						              		default:
						              			break;
						              	}
				              		}
				            	)()}
			              </span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			

			        <Col md={12} sm={24}>
			          <FormItem  label="有无违法违纪行为">
			              {getFieldDecorator('illegal_activities')(<span>
			              		{(() => {
					              		switch(formVals.illegal_activities) {
						              		case "0":
						              			return "无";
						              			break;
						              		case "1":
						              			return "有";
						              			break;
						              		default:
						              			break;
						              	}
				              		}
				            	)()}
			              </span>)}
			          </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
			          <FormItem  label="有无重大病史">
			              {getFieldDecorator('major_medical_history')(<span>
			              		{(() => {
					              		switch(formVals.major_medical_history) {
						              		case "0":
						              			return "无";
						              			break;
						              		case "1":
						              			return "有";
						              			break;
						              		default:
						              			break;
						              	}
				              		}
				            	)()}
			              </span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
			        <Col md={12} sm={24}>
			          <FormItem  label="最高学历">
			              {getFieldDecorator('first_education')(<span>
			              		{(() => {
					              		switch(formVals.first_education) {
						              		case "81":
						              			return "小学";
						              			break;
						              		case "71":
						              			return "初中";
						              			break;
						              		case "61":
						              			return "高中";
						              			break;
						              		case "41":
						              			return "中专";
						              			break;
						              		case "21":
						              			return "本科";
						              			break;
						              		case "12":
						              			return "硕士";
						              			break;
						              		case "11":
						              			return "博士";
						              			break;
						              		default:
						              			break;
						              	}
				              		}
				            	)()}
			              </span>)}
			          </FormItem>
			        </Col>
			
			    </Row>
			
			  </Form>
			)}
		</div>
	
				
	);
  }

}

export default UpdateForm;
